<template>
    <img class="avatar-container" :src="url" :style="{ width: size + 'px', height: size + 'px' }" />
</template>

<script>
export default {
    props: {
        url: {
            type: String, // url必须是一个字符串 
            required: true,
        },
        size: {
            type: Number,
            default:150,
        },
    }
}
</script>

<!-- 加上scoped之后，就成为了带有作用域的样式 -->
<style scoped>
.avatar-container {
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
</style>